<!-- 地图参数设置 -->
<template>
  <div>
    <div style="" ref="map" id="mapDiv">11</div>
    <button @click="zoomIn">地图放大</button>
    <button @click="zoomOut">地图缩小</button>
    <button @click="panTo">地图平移</button>
    <button @click="getBounds">获取当前地图可视范围</button>
    <button @click="centerAndZoom">设置地图中心点坐标及缩放级别</button>
    <button @click="setZoom">设置地图缩放指定级别</button>
    <button @click="disableDrag">禁止拖拽地图</button>
    <button @click="enableDrag">允许拖拽地图</button>
    <button @click="enableDoubleClickZoom">允许双击放大地图</button>
    <button @click="disableDoubleClickZoom">禁止双击放大地图</button>
    <button @click="enableScrollWheelZoom">允许鼠标滚轮缩放地图</button>
    <button @click="disableScrollWheelZoom">禁止鼠标滚轮缩放地图</button>
    <button @click="enableInertia">允许鼠标地图惯性拖拽</button>
    <button @click="disableInertia">禁止鼠标地图惯性拖拽</button>
    <button @click="enableKeyboard">禁止键盘操作地图</button>
    <button @click="disableKeyboard">禁止键盘操作地图</button>
    <button @click="setZoomLevels">设置地图显示级别范围[8,10]</button>
    <button @click="setMaxBounds">设置地图显示范围</button>
    <button @click="setStyle">设置地图样式</button>
    <button @click="getCenter">获取当前地图中心点坐标</button>
    <button @click="getZoom">获取地图当前缩放级别</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// 模板里不能直接用全局变量 T，要在 <script setup> 里声明或通过方法暴露
const map = ref(null);

// DOM挂载完毕，调用该函数
onMounted(() => {
  map.value = new T.Map("mapDiv", {
    projection: "EPSG:4326",
    minZoom: 4,
    maxZoom: 18,
    center: new T.LngLat(117.03186, 36.65245),
    zoom: 12,
  });
});

/**
 * 地图放大
 */
const zoomIn = () => {
  map.value.zoomIn();
};

/**
 * 地图缩小
 */
const zoomOut = () => {
  map.value.zoomOut();
};

/**
 * 地图平移/移动
 */
const panTo = () => {
  map.value.panTo(new T.LngLat(116.64899, 40.12948));
};

/**
 * 获取地图可视位置
 */
const getBounds = () => {
  var bs = map.value.getBounds(); //获取可视区域
  var bssw = bs.getSouthWest(); //可视区域左下角
  var bsne = bs.getNorthEast(); //可视区域右上角
  console.log("可视区域左下角", bssw.lng, bssw.lat);
  console.log("可视区域右上角", bsne.lng, bsne.lat);
};

/**
 * 设置地图中心点坐标及缩放级别
 */
const centerAndZoom = () => {
  map.value.centerAndZoom(new T.LngLat(116.64899, 40.12948), 12);
};

/**
 * 设置地图缩放指定级别
 */
const setZoom = () => {
  map.value.setZoom(16);
};

/**
 * 允许地图拖拽（默认允许）
 */
const enableDrag = () => {
  map.value.enableDrag();
};

/**
 * 禁止地图拖拽
 */
const disableDrag = () => {
  map.value.disableDrag();
};

/**
 * 允许双击放大地图（默认允许）
 */
const enableDoubleClickZoom = () => {
  map.value.enableDoubleClickZoom();
};
/**
 * 禁止双击放大地图
 */
const disableDoubleClickZoom = () => {
  map.value.disableDoubleClickZoom();
};

/**
 * 允许鼠标滚轮缩放地图（默认允许）
 */
const enableScrollWheelZoom = () => {
  map.value.enableScrollWheelZoom();
};
/**
 * 禁止鼠标滚轮缩放地图
 */
const disableScrollWheelZoom = () => {
  map.value.disableScrollWheelZoom();
};

/**
 * 允许鼠标地图惯性拖拽（默认允许）
 */
const enableInertia = () => {
  map.value.enableInertia();
};
/**
 * 禁止鼠标地图惯性拖拽
 */
const disableInertia = () => {
  map.value.disableInertia();
};

/**
 * 允许键盘操作地图（默认允许）
 *  1、上下左右方向键可操作地图位移
 *  2、+ - 可操作地图缩放
 */
const enableKeyboard = () => {
  map.value.enableKeyboard();
};
/**
 * 禁止键盘操作地图
 */
const disableKeyboard = () => {
  map.value.disableKeyboard();
};

/**
 * 设置地图显示级别范围
 */
const setZoomLevels = () => {
  map.value.setMinZoom(8); // 最小显示级别
  map.value.setMaxZoom(10); // 最大显示级别
};

/**
 * 设置地图显示范围
 */
const setMaxBounds = () => {
  map.value.setMaxBounds(
    new T.LngLatBounds(
      new T.LngLat(116.27648, 39.84042),
      new T.LngLat(116.4605, 39.9721)
    )
  );
};

/**
 * 设置地图样式
 */
const setStyle = () => {
  setTimeout(() => {
    console.log(1);
    map.value.setStyle("block");
  }, 1000);
  setTimeout(() => {
    console.log(2);
    map.value.setStyle("indigo");
  }, 2000);
  setTimeout(() => {
    console.log(3);
    map.value.removeStyle(); // 恢复默认
  }, 3000);
};

/**
 * 获取当前地图中心点坐标
 */
const getCenter = () => {
  console.log(map.value.getCenter());
  console.log(map.value.getCenter().getLng());
  console.log(map.value.getCenter().getLat());
};

/**
 * 获取地图当前缩放级别
 */
const getZoom = () => {
  console.log(map.value.getZoom());
};


</script>
<style>
#mapDiv {
  width: 800px;
  height: 500px;
  margin: 0 auto;
}
button {
  margin: 10px;
}
</style>
